<template>
  <div>
    <el-form label-width="120px">
      <el-card shadow="never">
        <el-form-item
          label="活动详情页标题"
          label-width="130px">
          <el-input
            v-model="formData.activity_info_title"
            class="max-w-[400px]"
            placeholder="请输入活动详情页标题" />
        </el-form-item>
        <el-form-item
          label="默认播放器背景"
          label-width="130px">
          <upload-image
            v-model="formData.default_play_back"
            :limit="1"></upload-image>
        </el-form-item>
        <el-form-item
          label="视频播放图标"
          label-width="130px">
          <upload-image
            v-model="formData.video_play_icon"
            :limit="1"></upload-image>
        </el-form-item>
        <el-form-item
          label="是否显示进度条"
          label-width="130px">
          <el-radio-group v-model="formData.show_loading">
            <el-radio
              label="开启"
              :value="$convert(1, formData.show_loading)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.show_loading)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="答题最小时间"
          label-width="130px">
          <el-radio-group v-model="formData.min_dati_time">
            <el-radio
              label="开启"
              :value="$convert(1, formData.min_dati_time)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.min_dati_time)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="是否全屏"
          label-width="130px">
          <el-radio-group v-model="formData.is_full">
            <el-radio
              label="开启"
              :value="$convert(1, formData.is_full)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.is_full)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="是否暂停"
          label-width="130px">
          <el-radio-group v-model="formData.is_stop">
            <el-radio
              label="开启"
              :value="$convert(1, formData.is_stop)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.is_stop)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="获取用户位置信息"
          label-width="130px">
          <el-radio-group v-model="formData.get_location">
            <el-radio
              label="开启"
              :value="$convert(1, formData.get_location)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.get_location)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="禁止转发"
          label-width="130px">
          <el-radio-group v-model="formData.forbid_share">
            <el-radio
              label="开启"
              :value="$convert(1, formData.forbid_share)"></el-radio>
            <el-radio
              label="关闭"
              :value="$convert(0, formData.forbid_share)"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="不转m3u8"
          label-width="130px">
          <el-radio-group v-model="formData.no_mp4_to_m3u8">
            <el-radio
              label="开启"
              value="1"></el-radio>
            <el-radio
              label="关闭"
              value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>
    </el-form>
    <div class="footer">
      <el-button
        type="primary"
        @click="submit"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { IActivitySettings } from "../../types";
import { getSettingInfoApi, saveSettingInfoApi } from "../../api/system";
import { t } from "@/lang";
import { ElMessage } from "element-plus";

const instance = getCurrentInstance() as any
const { $convert } = instance.appContext.config.globalProperties

const formData = ref<IActivitySettings>({
  activity_info_title: "",
  default_play_back: "",
  is_full: 0,
  is_stop: 0,
  min_dati_time: 0,
  show_loading: 0,
  video_play_icon: "",
  get_location: 0,
  forbid_share: 0,
  no_mp4_to_m3u8: '0',
});

async function getSettingInfo() {
  const res = await getSettingInfoApi("activity");
  formData.value = res.data as IActivitySettings;
  formData.value.no_mp4_to_m3u8 = (formData.value.no_mp4_to_m3u8 && formData.value.no_mp4_to_m3u8.toString()) || '0'
}

async function submit() {
  await saveSettingInfoApi("activity", { content: formData.value });
  ElMessage.success(t("save.success"));
}

onMounted(() => {
  getSettingInfo();
});
</script>

<style lang="scss" scoped>
.footer {
  position: sticky;
  bottom: 0;
  margin-top: 20px;
  display: flex;
  padding: 15px;
  justify-content: center;
  background-color: var(--el-bg-color);
}
</style>
